<template>
    <div class="auth-container">
      <div class="auth-card">
        <h1 class="auth-title">电影天堂</h1>
        <form @submit.prevent="handleLogin" class="auth-form">
          <div class="form-group">
            <label for="username">用户名</label>
            <input 
              v-model="form.username" 
              type="text" 
              id="username" 
              placeholder="请输入用户名"
            >
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input 
              v-model="form.password" 
              type="password" 
              id="password" 
              placeholder="请输入密码"
            >
          </div>
          <button type="submit" class="auth-btn">登录</button>
          <button type="button" class="auth-btn secondary" @click="autoFill">快速登录</button>
        </form>
        <p class="auth-footer">
          还没有账号？<router-link to="/register">立即注册</router-link>
        </p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useAuthStore } from '@/stores/auth'
  import { useRouter } from 'vue-router'
  
  const authStore = useAuthStore()
  const router = useRouter()
  
  const form = ref({
    username: '',
    password: ''
  })
  
  const autoFill = () => {
    form.value = {
      username: '23003016',
      password: '123456'
    }
  }
  
  const handleLogin = async () => {
    try {
      await authStore.login(form.value)
      router.push('/movies')
    } catch (error) {
      alert('登录失败: ' + (error.response?.data?.message || error.message))
    }
  }
  </script>
  
  <style scoped lang="scss">
  .auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #20b2aa 0%, #008b8b 100%);
    padding: 2rem;
  }
  
  .auth-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 450px;
    padding: 2.5rem;
  }
  
  .auth-title {
    text-align: center;
    color: #008b8b;
    margin-bottom: 2rem;
    font-size: 2rem;
  }
  
  .auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    
    label {
      font-weight: 500;
      color: #555;
    }
    
    input {
      padding: 0.8rem;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 1rem;
      transition: border-color 0.3s;
      
      &:focus {
        outline: none;
        border-color: #20b2aa;
      }
    }
  }
  
  .auth-btn {
    background: #20b2aa;
    color: white;
    border: none;
    padding: 1rem;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    
    &:hover {
      background: #008b8b;
    }
    
    &.secondary {
      background: #48d1cc;
    }
  }
  
  .auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: #666;
    
    a {
      color: #20b2aa;
      text-decoration: none;
      font-weight: 500;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
</style>